import { addDialog } from "@/components/ReDialog";
import { message } from "@/utils/message";
import { zxcvbn } from "@zxcvbn-ts/core";
import { isAllEmpty } from "@pureadmin/utils";

import { ElForm, ElInput, ElFormItem, ElProgress } from "element-plus";
import { ref, watch, reactive } from "vue";

import { changePassword } from "@/api/user/security";

import { ChangePassword } from "@/api/user";

const pwdProgress = [
  { color: "#e74242", text: "非常弱" },
  { color: "#EFBD47", text: "弱" },
  { color: "#ffa500", text: "一般" },
  { color: "#1bbf1b", text: "强" },
  { color: "#008000", text: "非常强" }
];
// 当前密码强度（0-4）
const curScore = ref();

const ruleFormRef = ref();
const changePasswordParam = reactive({
  oldPassword: "",
  newPassword: ""
});

export function handlePassword() {
  addDialog({
    title: `修改密码`,
    width: "30%",
    draggable: true,
    closeOnClickModal: false,
    contentRenderer: () => (
      <>
        <ElForm ref={ruleFormRef} model={changePasswordParam}>
          <ElFormItem
            prop="oldPassword"
            rules={[
              {
                required: true,
                message: "请输入旧密码"
              }
            ]}
          >
            <ElInput
              clearable
              show-password
              type="password"
              v-model={changePasswordParam.oldPassword}
              placeholder="请输入旧密码"
            />
          </ElFormItem>
          <ElFormItem
            prop="newPassword"
            rules={[
              {
                required: true,
                message: "请输入新密码",
                trigger: "blur"
              }
            ]}
          >
            <ElInput
              clearable
              show-password
              type="password"
              v-model={changePasswordParam.newPassword}
              placeholder="请输入新密码"
            />
          </ElFormItem>
        </ElForm>
        <div class="mt-4 flex">
          {pwdProgress.map(({ color, text }, idx) => (
            <div class="w-[19vw]" style={{ marginLeft: idx !== 0 ? "4px" : 0 }}>
              <ElProgress
                striped
                striped-flow
                duration={curScore.value === idx ? 6 : 0}
                percentage={curScore.value >= idx ? 100 : 0}
                color={color}
                stroke-width={10}
                show-text={false}
              />
              <p
                class="text-center"
                style={{ color: curScore.value === idx ? color : "" }}
              >
                {text}
              </p>
            </div>
          ))}
        </div>
      </>
    ),
    closeCallBack: () => {
      changePasswordParam.oldPassword = "";
      changePasswordParam.newPassword = "";
    },
    beforeSure: done => {
      ruleFormRef.value.validate((valid: any) => {
        if (valid) {
          // 表单规则校验通过
          const param: ChangePassword = {
            oldPassword: changePasswordParam.oldPassword,
            newPassword: changePasswordParam.newPassword
          };
          changePassword({ param })
            .then(({ data }) => {
              console.debug("data", data);
              message(`已成功修改密码`, {
                type: "success"
              });
              done(); // 关闭弹框
            })
            .catch(error => {
              console.error("error", error);
            });
        }
      });
    }
  });

  watch(
    changePasswordParam,
    ({ newPassword }) =>
      (curScore.value = isAllEmpty(newPassword)
        ? -1
        : zxcvbn(newPassword).score)
  );
}
